<template>
  <!-- 其他联弹窗 -->
  <el-dialog v-if="dialogVisible" :title="`【${fileName}】下载`" :visible.sync="dialogVisible" width="760px"
    class="death-book-dialog">
    <DeathTable v-model="info" ref="deathTable" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="handleDownload" :loading="exportLoading" :disabled="!info.isDownload">下
        载</el-button>
      <el-button type="success" @click="handlePrintFirst" :disabled="!info.isPrintFirstForm">打印第一联</el-button>
      <el-button type="success" @click="handlePrintOther" :disabled="!info.isPrintOtherForm">打印第二三四联</el-button>
    </span>
  </el-dialog>
</template>

<script>
import DeathTable from '@/components/DeathTable';
import { getExactType } from '@/utils';
import { toPng } from 'html-to-image';

export default {
  name: "OtherCertificate",
  components: { DeathTable },
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "value",
    event: "input",
  },
  watch: {

  },

  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  computed: {
    birthDateObj() {
      let map = {};
      this.info.birthDate && (map = this.info.birthDate.split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    deathDateObj() {
      let map = {};
      this.info.deathDate && (map = this.info.deathDate.split(' ')[0].split('-').reduce((acc, cur, index) => {
        acc[['year', 'month', 'date'][index]] = cur
        return acc
      }, {}))

      return map;
    },
    dialogVisible: {
      get() {
        return this.value || false;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
  data() {
    return {
      exportLoading: false,
      fileName: '附件',
    };
  },
  methods: {
    cancel() {
      this.dialogVisible = false;
    },
    handlePrintFirst() {
      const query = { ...this.$route.query }
      delete query.from;
      const url = this.$router.resolve({ name: 'PrintDeathTableFirst', query }).href;
      window.open(url, '_blank')
    },
    handlePrintOther() {
      const query = { ...this.$route.query }
      delete query.from;
      const url = this.$router.resolve({ name: 'PrintDeathTableOther', query }).href;
      window.open(url, '_blank')
    },
    handleDownload() {
      this.exportLoading = true
      const node = this.$refs.deathTable.$el;

      console.log("🚀 ~ handleDownload ~ node:", node)
      toPng(node)
        .then((dataUrl) => {
          const link = document.createElement('a')
          link.download = `${this.fileName}-${this.info.name}-${this.info.serialNumber}.png`
          link.href = dataUrl
          link.click()
          link.addEventListener('click', () => {
            link.remove()
          })
          this.exportLoading = false
          this.dialogVisible = false;
        })
        .catch((error) => {

          console.log("🚀 ~ handleDownload ~ error:", error)

          this.$message.warning('出现未知错误，请重试')
          this.exportLoading = false
        })
    },
  }
}
</script>


<style lang="scss" scoped>
.death-book-dialog {
  &::v-deep {
    .el-dialog__body {
      padding: 20px;
      max-height: 75vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
}
</style>
